<!-- 预览附件模态框 -->
<template>
  <div class="iframe-box" :style="getIframeStyle">
    <div v-if="showImage" class="img-box">
      <img ref="rotate" class="img-file" :src="fileUrl">
    </div>
    <iframe v-else id="preview_iframe" ref="iframe" :src="fileUrl" width="100%" height="100%">
      <p>你的浏览器不支持iframe。</p>
    </iframe>
    <div class="tool-box" v-if="showImage">
      <el-button class="el-icon-refresh-left" @click="rotateL">旋转</el-button>
      <el-button class="el-icon-refresh-right" @click="rotateR">旋转</el-button>
      <el-button class="el-icon-zoom-in" @click="scaleMax">放大</el-button>
      <el-button class="el-icon-zoom-out" style="margin-right:10px" @click="scaleMin">缩小</el-button>
    </div>
  </div>
</template>
<script>
const FileBaseUrl = process.env.VUE_APP_FILE_BASE_URL
export default {
  props: {
    dialogData: {
      type: Object,
      default: () => {}
    },
    // 是否全屏
    isFullScreen: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      fileUrl: '',
      deg: 0,
      showImage: false,
      scale: 1
    }
  },
  computed: {
    getIframeStyle() {
      let style = 'display: flex; justify-content: center; align-items: center;'
      if (this.showImage) {
        style += 'background-color: rgba(0,0,0,0.9);'
      }
      if (this.isFullScreen) {
        style += 'height: calc(100vh - 51px);'
      } else {
        style += 'height: calc(100vh - 250px);'
      }
      console.log(style)
      return style
    }
  },
  created() {
    let fileType = this.dialogData.name.substring(this.dialogData.name.lastIndexOf('.'))
    fileType = fileType.toLowerCase() // 大写转小写 oht add at 2022.10.11
    const env = process.env.NODE_ENV
    let fileAddress = ''
    // 注意这里 host是完整的路径  fileUrl和pdfUrl
    if (fileType === '.pdf') { // 预览pdf文件
      // fileAddress = env === 'prod' ? this.dialogData.host : this.dialogData.fileUrl
      // this.fileUrl = `/PDFViewerES5/web/viewer.html?file=${fileAddress}`
      this.fileUrl = FileBaseUrl + this.dialogData.path
      console.log(this.fileUrl)
    } else if (['.xls', '.xlsx', '.doc', '.docx', '.word', '.wordx'].includes(fileType)) { // 预览word和excel
      // if (this.dialogData.pdfUrl !== 'null') {
      //   fileAddress = env === 'prod' ? `${BASE_URL}/${this.dialogData.pdfUrl}` : '/' + this.dialogData.pdfUrl
      //   this.fileUrl = `/PDFViewerES5/web/viewer.html?file=${fileAddress}` // 测试、正式用这个
      // }
    } else { // 预览图片
      this.showImage = true
      this.fileUrl = FileBaseUrl + this.dialogData.path
    }
  },
  methods: {
    // 左旋转
    rotateL() {
      this.deg -= 90
      if (this.deg <= -360) {
        this.deg = 0
      }
      if (this.deg === -90 || this.deg === -270) {
        this.scale = 0.8
        this.$refs.rotate.style.transform = `rotate(${this.deg}deg) scale(0.8) `
      } else {
        this.scale = 1
        this.$refs.rotate.style.transform = `rotate(${this.deg}deg)`
      }
    },
    // 右旋转
    rotateR() {
      this.deg += 90
      if (this.deg >= 360) {
        this.deg = 0
      }
      if (this.deg === 90 || this.deg === 270) {
        this.scale = 0.8
        this.$refs.rotate.style.transform = `rotate(${this.deg}deg) scale(0.8)`
      } else {
        this.scale = 1
        this.$refs.rotate.style.transform = `rotate(${this.deg}deg)`
      }
    },
    // 放大
    scaleMax() {
      this.scale += 0.1
      this.$refs.rotate.style.transform = `rotate(${this.deg}deg) scale(${this.scale})`
    },
    // 缩小
    scaleMin() {
      this.scale -= 0.1
      this.$refs.rotate.style.transform = `rotate(${this.deg}deg) scale(${this.scale})`
    }
  }
}

</script>
<style lang="scss" scoped>
#preview_iframe {
  margin: 0 auto;
}

.img-box {
  // width: 100%;
  // height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.img-file {
  padding: 0;
  height: 80%;
}

.tool-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: right;
}

</style>
